<!DOCTYPE html>

<html lang="zh-cmn-Hans-CN">

<head>
    <meta charset="UTF-8" name="viewport"
        content="width=device-width,initial-scale=1,user-scalable=no,minimum-scale=1,maximum-scale=1,viewport-fit=cover">
    <title>
        <%= htmlWebpackPlugin.options.title %>
    </title>
    <style>
        html {
            overflow: hidden;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            touch-action: none;
            user-select: none;
            -webkit-user-select: none;
        }

        body {
            position: absolute;
            margin: 0;
            top: constant(safe-area-inset-top);
            left: constant(safe-area-inset-left);
            right: constant(safe-area-inset-right);
            top: env(safe-area-inset-top);
            left: constant(safe-area-inset-left);
            right: constant(safe-area-inset-right);
            bottom: 0;
            background-color: rgb(0, 0, 0, 0);
            overflow: hidden;
            touch-action: none;
            padding-bottom: env(safe-area-inset-bottom);
        }

        #app-root {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: 0;
            padding: 0;
            background-color: rgba(0, 0, 0, 0);
        }

        @media screen and (orientation: portrait) {
            body {
                position: absolute;
                margin: 0;
                top: constant(safe-area-inset-top);
                bottom: constant(safe-area-inset-bottom);
                left: constant(safe-area-inset-left);
                right: constant(safe-area-inset-right);
                top: env(safe-area-inset-top);
                bottom: env(safe-area-inset-bottom);
                left: env(safe-area-inset-left);
                right: env(safe-area-inset-right);
                background-color: rgba(0, 0, 0, 0);
                overflow: hidden;
                touch-action: none;
            }
        }

        @media screen and (orientation: landscape) {
            body {
                position: absolute;
                margin: 0;
                top: costant(safe-area-inset-top);
                left: constant(safe-area-inset-left);
                right: constant(safe-area-inset-right);
                top: env(safe-area-inset-top);
                left: env(safe-area-inset-left);
                right: env(safe-area-inset-right);
                bottom: 0;
                background-color: rgba(0, 0, 0, 0);
                overflow: hidden;
                touch-action: none;
            }
        }

        #loading-page {
            position: fixed;
            right: 0;
            left: 0;
            top: 0;
            bottom: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(0, 0, 0, 1);
        }
    </style>
    <script type="text/javascript">

        const stop = () => {
            return false;
        }
        document.oncontextmenu = stop;

        const isWebGL1Available = () => {
            try {
                const canvas = document.createElement('canvas');
                return window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl'));
            } catch (e) {
                false;
            }
        };
        const isWebGL2Available = () => {
            try {
                const canvas = document.createElement('canvas');
                return window.WebGL2RenderingContext && canvas.getContext('webgl2');
            } catch (e) {
                return false;
            }
        };
        const checkWebglAbility = () => {
            return isWebGL1Available() || isWebGL2Available();
        };
        const onWindowLoad = () => {
            if (checkWebglAbility()) {
                return;
            }
            window.notSupportWebGL = '';
            alert('当前浏览器缺乏展示相应内容的能力,请尝试[更新浏览器到最新版本]或[使用其它支持webGL的浏览器]!');
        };

        window.addEventListener('load', onWindowLoad);

        const closeLoadingUI = () => {
            const loadingUI = document.getElementById('loading-page');
            if (loadingUI) loadingUI.remove();
        };

        window.addEventListener('page-loaded', (e) => {
            closeLoadingUI();
        });

    </script>
</head>

<body>
    <div id="app-root"></div>
    <div id="loading-page">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="64" height="20">
            <circle cx="10" cy="10" r="10" fill-opacity="1" fill="#a3ffa9">
                <animate attributeType="xml" attributeName="fill-opacity" values="1;0.67;0.34;0.01;0.34;0.67;1"
                    begin="0s" dur="2s" repeatCount="indefinite" />
            </circle>
            <circle cx="32" cy="10" r="10" fill="#a3ffa9" fill-opacity="0.1">
                <animate attributeType="xml" attributeName="fill-opacity" values="0.67;1;0.67;0.34;0.01;0.34;0.67"
                    begin="0s" dur="2s" repeatCount="indefinite" />
            </circle>
            <circle cx="54" cy="10" r="10" fill="#a3ffa9" fill-opacity="0.1">
                <animate attributeType="xml" attributeName="fill-opacity" values="0.34;0.67;1;0.67;0.34;0.01;0.34"
                    begin="0s" dur="2s" repeatCount="indefinite" />
            </circle>
        </svg>
    </div>
</body>

</html>